<template>
	<view class="components-input tn-safe-area-inset-bottom">
		<tn-nav-bar fixed :isBack='false'>不是给文明以岁月</tn-nav-bar>
		<!-- 页面内容 -->
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<demo-title title="查询任务进度" :contentPadding="false">
				<view class="content tn-flex tn-flex-direction-row tn-flex-col-center">
					<view class="content__title">任务ID:</view>
					<view class="content__data tn-flex-1">
						<tn-input type="text" placeholder="默认查询当前IP的任务" v-model="task_id" disabled=""></tn-input>
					</view>
				</view>
				
				<view class="tn-margin">
					<text>任务状态： {{status}}</text>
				</view>
							
				<view style="margin: 20rpx;">
					<tn-button :shadow="true" width="100%" height="100rpx" backgroundColor="#01BEFF" fontColor="#FFFFFF"
						margin="10rpx 0" @tap="submitTask()">查询任务</tn-button>					
				</view>
				
				<view v-for="(item,index) in ai" :key="index" :src="item">
					<view class="tn-margin">
						<text>标题：{{item.title}}</text>
					</view>
					<view class="tn-margin">
						<text>描述：{{item.scene}}</text>
					</view>	
				</view>
				
				
				
				<image style="width: 100%;" mode="widthFix" v-for="(item,index) in imageList" :key="index" :src="item">
					
				
			</demo-title>
			<tn-steps :list="list" mode="icon"></tn-steps>
		</view>
	</view>
</template>

<script>
	import demoTitle from '@/libs/components/demo-title.vue'

	export default {
		name: 'ComponentsInput',
		components: {
			demoTitle
		},
		data() {
			return {
				status:'么得状态',
				// url: 'https://ai.moyi.vip/ai/task',
				url: 'http://192.168.5.10:9527/ai/task',
				ai:[
					{
						title:'作品标题',
						scene:'',
					}
				],
				imageList:[
					'https://vue2.tuniaokj.com/common/logo.png'
				],
				list: [{
						name: '第一步'
					},
					{
						name: '第二步',
						icon: 'trusty',
						selectIcon: 'trusty-fill'
					},
					{
						name: '第三步',
						icon: 'safe',
						selectIcon: 'safe-fill'
					},
					{
						name: '第四步',
						icon: 'vip',
						selectIcon: 'vip-fill'
					}
				],
				task_id:'',
			}
		},
		methods: {
			submitTask() {
				let param = {
					task_id:this.task_id
				};
				uni.request({
					url: this.url,
					method: "POST",
					data: param,
					success: (res) => {
						
						res = res.data;
						console.log('res', res);
						if (res.code) {
							this.status = res.data.status;
							if( res.data.image){
								this.imageList = res.data.image;
								this.ai = res.data.ai;
							}							
						} else {
							this.$tn.message.toast(res.msg)
						}
						console.log(res.data);
					},
					fail: (err) => {
						console.error(err);
					},
				});
				console.log('param', param);
			}
		}
	}
</script>


<style lang="scss" scoped>
	.components-input {
		background-color: $tn-bg-gray-color;
		min-height: 100vh;

		.content {
			background-color: #FFFFFF;

			&__title {
				padding: 30rpx;
			}

			&__data {
				margin: 10rpx 0;
				margin-right: 30rpx;
			}
		}
	}
</style>